<template>
  <div class="flex flex-col sm:flex-row w-full justify-between gap-3">
    <catch-table
      :columns="columns"
      :api="api"
      class="w-full"
      ref="catchtable"
      row-key="id"
      :search-form="[
        {
          type: 'input',
          label: '分类名称',
          name: 'name'
        }
      ]"
    >
      <!-- dialog -->
      <template #dialog="row">
        <Create :primary="row?.id" :api="api" />
      </template>
    </catch-table>
  </div>
</template>
<script lang="ts" setup>
import Create from './create.vue'
const api = 'cms/category'

const columns = [
  {
    label: 'ID',
    prop: 'id'
  },
  {
    label: '名称',
    prop: 'name'
  },
  {
    label: '别名',
    prop: 'slug',
    tags: true
  },
  {
    label: '链接',
    prop: 'url',
    link: true
  },
  {
    label: '文章数量',
    prop: 'post_count'
  },
  {
    label: '创建时间',
    prop: 'created_at'
  },
  {
    type: 'operate',
    label: '操作'
  }
]
</script>
